<div class="box box-primary">
  <div class="box-header with-border">
    <h3 class="box-title">
      组合流水
      <span><em><small>{{tableViewStatus.overview ? "概览视图":"详细视图"}}</small></em></span>
    </h3>
    <button type="button" class="btn btn-primary" (click)="switch2Overview()">概览视图</button>
    <button type="button" class="btn btn-primary" (click)="switch2Detail()">详细视图</button>
    <button type="button" class="btn btn-primary">导出数据</button>
    <button type="button" class="btn btn-primary">打印本页</button>
    <a class="btn btn-default pull-right fa fa-arrow-left" routerLink="../"
       alt="返回" title="返回"></a>
  </div>
  <div class="box box-body table-responsive no-padding">
    <!--搜索栏区域Begin-->
    <form class="form-inline">
      <div>
        <div class="form-group">
          <label for="fundCodeList">组合名称：</label>
          <select class="form-control ibt-search-input ibt-select2-plugin"
                  id="fundCodeList" #fundCodeList>
          </select>
        </div>
        <div class="form-group">
          <label for="tradingFloor">发生场所：</label>
          <select class="form-control ibt-search-input" id="tradingFloor">
            <option value="">全部</option>
            <option value="SCH">上清所</option>
            <option value="CBC">中债登</option>
          </select>
        </div>
        <div class="form-group">
          <label for="occurDate">发生日期：</label>
          <input type="text" class="form-control daterangepicker-plugin ibt-search-input" id="occurDate">
        </div>
        <div class="form-group search-btn-container max">
          <button type="button" class="btn btn-primary" (click)="search(true, false)">查询</button>
          <button type="button" class="btn btn-warning" (click)="resetSearch()">重置</button>
        </div>
      </div>
    </form>
    <!--搜索栏区域End-->

    <!--列表视图区域Begin-->
    <div>
      <div class="table-responsive">
        <!--组合流水概览视图Begin-->
        <table class="table table-bordered table-hover table-striped" [hidden]="!tableViewStatus.overview">
          <thead>
          <tr>
            <th>组合名称</th>
            <th>组合代码</th>
            <th>交易数量</th>
            <th>上清未完成轧差金额</th>
            <th>上清余额</th>
            <th>中债未完成轧差金额</th>
            <th>中债余额</th>
            <th>网银存款</th>
            <th>发生日期</th>
            <th>操作提示</th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let item of overviewListData;let index = index" [attr.data-index]="index">
            <!--组合名称Begin-->
            <td data-field="fundName">
              {{item.fundName}}
            </td>
            <!--组合名称End-->

            <!--组合代码Begin-->
            <td data-field="fundCode">
              {{item.fundCode}}
            </td>
            <!--组合代码End-->

            <!--交易数量Begin-->
            <td data-field="total">
              {{item.total}}
            </td>
            <!--交易数量End-->

            <!--上清未完成轧差金额Begin-->
            <td data-field="schUnnettingAmount">
              {{item.schUnnettingAmount | numeral:'0,0.00':true: false}}
            </td>
            <!--上清未完成轧差金额End-->

            <!--上清余额Begin-->
            <td data-field="schBalance">
              {{item.schBalance | numeral:'0,0.00':true: false}}
            </td>
            <!--上清余额End-->

            <!--中债未完成轧差金额Begin-->
            <td data-field="cbcUnnettingAmount">
              {{item.cbcUnnettingAmount | numeral:'0,0.00':true: false}}
            </td>
            <!--中债未完成轧差金额End-->

            <!--中债余额Begin-->
            <td data-field="cbcBalance">
              {{item.cbcBalance | numeral:'0,0.00':true: false}}
            </td>
            <!--中债余额End-->

            <!--网银存款Begin-->
            <td data-field="bankDeposit">
              {{item.bankDeposit | numeral:'0,0.00':true: false}}
            </td>
            <!--网银存款End-->

            <!--发生日期Begin-->
            <td data-field="occurDate">
              {{item.occurDate}}
            </td>
            <!--发生日期End-->

            <!--操作提示Begin-->
            <td data-field="tips">
              {{item.tips}}
            </td>
            <!--操作提示End-->
          </tr>
          </tbody>
        </table>
        <!--组合流水概览视图End-->

        <!--组合流水详细视图Begin-->
        <table class="table table-hover table-bordered" [hidden]="!tableViewStatus.detail">
          <thead>
          <tr>
            <th>组合名称</th>
            <th>组合代码</th>
            <th>上清发生金额(元)</th>
            <th>上清余额(元)</th>
            <th>中债登发生金额(元)</th>
            <th>中债登余额(元)</th>
            <th>发生时间</th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let detail of detailListData; let index = index" [attr.data-index]="index">
            <!--组合名称Begin-->
            <td data-field="fundName">
              <div class="cell">
                <p>{{detail.fundName}}</p>
              </div>
            </td>
            <!--组合名称End-->

            <!--组合代码Begin-->
            <td data-field="fundCode">
              <div class="cell">
                <p>{{detail.fundCode}}</p>
              </div>
            </td>
            <!--组合代码End-->

            <!--上清发生金额Begin-->
            <td data-field="schOccurAmount" class="no-padding">
              <div class="list-item" *ngFor="let item of detail.list;let pos = index" [attr.data-detail-index]="pos">
                <ng-container *ngIf="item.schOccurAmount != null">
                  <p>{{item.schOccurDirection === 'IN' ? '+' : '-'}}{{ item.schOccurAmount | numeral:'0,0.00':false: false}}</p>
                </ng-container>
              </div>
            </td>
            <!--上清发生金额End-->

            <!--上清余额Begin-->
            <td data-field="schBalance" class="no-padding">
              <div class="list-item" *ngFor="let item of detail.list;let pos = index" [attr.data-detail-index]="pos">
                <p>{{ item.schBalance | numeral:'0,0.00':true: false }}</p>
              </div>
            </td>
            <!--上清余额End-->

            <!--中债登发生金额Begin-->
            <td data-field="cbcOccurAmount" class="no-padding">
              <div class="list-item" *ngFor="let item of detail.list;let pos = index" [attr.data-detail-index]="pos">
                <ng-container *ngIf="item.cbcOccurAmount != null">
                  <p>{{item.cbcOccurDirection === 'IN' ? '+' : '-'}}{{ item.cbcOccurAmount | numeral:'0,0.00':false: false}}</p>
                </ng-container>
              </div>
            </td>
            <!--中债登发生金额End-->

            <!--中债余额Begin-->
            <td data-field="cbcBalance" class="no-padding">
              <div class="list-item" *ngFor="let item of detail.list;let pos = index" [attr.data-detail-index]="pos">
                <p>{{item.cbcBalance | numeral:'0,0.00':true: false}}</p>
              </div>
            </td>
            <!--中债余额End-->

            <!--发生时间Begin-->
            <td data-field="occurTime" class="no-padding">
              <div class="list-item" *ngFor="let item of detail.list;let pos = index" [attr.data-detail-index]="pos">
                <p>{{item.occurTime}}</p>
              </div>
            </td>
            <!--发生时间End-->
          </tr>
          </tbody>
        </table>
        <!--组合流水详细视图End-->
        <!--列表视图区域End-->
      </div>
    </div>
    <!--组合流水分页Begin-->
    <div class="box-footer clearfix">
      <app-pagination
        [currentPageNum]="pageInfo.currentPageNum"
        [pagesShow]="pageInfo.pagesShow"
        [totalPages]="pageInfo.totalPages"
        (pageChanged)="pageNavigation($event)">
        <div class="pull-left pagination-detail" data-pagination-additional="true">
            <span class="pagination-info">
              当前显示第{{pageInfo.startRow}}到第{{pageInfo.endRow}}条&nbsp;&nbsp;&nbsp;&nbsp;总共{{pageInfo.total}}条
            </span>
          <span class="page-list"><span class="btn-group dropup">
              <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                <span class="page-size">{{pageInfo.pageSize}}</span>
                <span class="caret"></span>
              </button>
              <ul class="dropdown-menu" role="menu">
                <li *ngFor="let i of pageInfo.pageList" role="menuitem"
                    [class.active]="pageInfo.pageSize === i"
                    (click)="pageSizeChange(i)">
                  <a href="javascript:void(0)">{{i}}</a>
                </li>
                </ul>
            </span> 条记录每一页</span>
        </div>
      </app-pagination>
    </div>
    <!--组合流水列表分页End-->
  </div>
</div>


